<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="email=no" name="format-detection"/>
    <meta content="telephone=no" name="format-detection" />
    <link href="__PUBLIC__/css/layout.css" type="text/css" rel="stylesheet" >
    <link href="__PUBLIC__/css/coverflow.css" type="text/css" rel="stylesheet" >
    <script src="__PUBLIC__/js/jquery-1.10.1.min.js"></script>
</head>
<body>
<img src="__PUBLIC__/images/loginbanner.png" width="100%" height="auto" class="login-banner" style=" display:none;">
<div class="page-e9">
    <div class="login"><a href="javascript:history.back();" ><i class="icon-iconfont-fanhui1"></i> </a><span class="register-logo"><img src="__PUBLIC__/images/loginlogo.png" ></span> </div>
    <div class="login-sub" style="margin-top:30px;">
        <div class="login-sub-c"><i class="icon-iconfont-quxiao"></i><i class="icon-iconfont-shouji"></i>
            <div class="login-inp">
                <input type="text" id="mobile" placeholder="请输入手机号码">
            </div>
        </div>
    </div>
    <div class="login-sub">
        <div class="login-sub-c">
            <div class="wrap">
                <input type="checkbox" id="s4" checked="" />
                <label class="slider-v2" onclick="changePassword();" for="s4"><span class="txt">abc</span></label>
            </div>
            <i class="icon-iconfont-suo"></i>
            <div class="login-inp">
                <input type="text" id="password" placeholder="请输入6-20位密码">
            </div>
        </div>
    </div>
    <div class="login-sub">
        <div class="login-sub-c">
            <div class="wrap1" onclick="sms_send($(this));">
                <b id="time_clock">获取验证码</b>
            </div>
            <i class="icon-iconfont-kupaishouji"></i>
            <div class="login-inp">
                <input type="text" id="code" placeholder="请输入6位手机验证码">
            </div>
        </div>
    </div>
    <div class="login-sub">
        <div class="login-btn-c">
            <button class="login-btn" onclick="do_sign();" type="button">完成注册</button>
        </div>
    </div>

    <div class="status_alert" style="display: none" id="status_alert">手机号码不正确</div>

</div>
<script>
    $(window).load(function(){
        var imgH=$(".login-banner").height();
        $(".login").css("height",imgH);
    });

    function changePassword(){
        if($('#password').attr('type') == 'text'){
            $('#password').attr('type','password');
        }else{
            $('#password').attr('type','text');
        }
    }

    function sms_send(e) {
        var mobile = $("#mobile").val();
        var access = 'xhr';
        var status_alert = $('#status_alert');
        var time_clock = $('#time_clock');
        if(mobile.length == 0) {
            status_alert.text('手机号码不能为空');
            status_alert.fadeIn();
            setTimeout(function(){status_alert.fadeOut()},2000);
            return false;
        }else{
            $.ajax({
                url:'/sms_send',
                type:'post',
                data:{
                    type:'sign',
                    mobile:mobile,
                    access:access
                },
                dataType:'json',
                beforeSend:function(){
                    e.removeAttr('onclick');
                    time_clock.attr('style','color:ligthgray');
                    time_clock.text('正在发送...')
                },
                success:function(msg){
                    if(msg.code == 200) {
                        time(time_clock);
                    }else{
                        e.attr('onclick','sms_send($(this));');
                        time_clock.removeAttr('style');
                        time_clock.text('获取验证码');
                        status_alert.text(msg.message);
                        status_alert.fadeIn();
                        setTimeout(function(){status_alert.fadeOut()},2000);
                    }
                },
                error:function(error) {
                    console.info(error);
                    time_clock.text('网络错误');
                    time_clock.attr('style','color:lightgray');
                    setTimeout(function(){
                        e.attr('onclick','sms_send($(this));');
                        time_clock.removeAttr('style');
                        time_clock.text('获取验证码')},3000)

                }
            })
        }
    }

    var wait = 60;
    function time(o) {
        if (wait == 0) {
            o.removeAttr('style');
            o.text("获取验证码");
            wait = 60;
        } else {
            o.attr('style','color:lightgray');
            o.text("重新发送(" + wait + ")");
            wait--;
            setTimeout(function() {
                        time(o)
                    },
                    1000)
        }
    }

    function do_sign() {
        var mobile = $("#mobile").val();
        var password = $("#password").val();
        var code = $("#code").val();
        var access = 'xhr';
        var type = 'sign';

        var thread_login = $('#thread_login');
        var status_alert = $('#status_alert') ;

        if(mobile.length == 0 || password.length == 0 ){
            status_alert.text('用户名或密码为空');
            status_alert.fadeIn();
            setTimeout(function(){status_alert.fadeOut()},2000);
        }
        if(code.length == 0){
            status_alert.text('验证码为空');
            status_alert.fadeIn();
            setTimeout(function(){status_alert.fadeOut()},2000);
        }

        $.ajax({
            url:'/do_sign',
            type:'post',
            data:{
                mobile:mobile,
                password:password,
                access:access,
                type:type,
                code:code
            },
            dataType:'json',
            beforeSend:function(){
                status_alert.text('正在注册，请稍等....');
                status_alert.fadeIn();
            },
            success:function(msg){
                if(msg.code == 200) {
                    status_alert.text('注册成功，正在跳转...');
                    history.back();
                }else{
                    status_alert.text(msg.message);
                    setTimeout(function(){status_alert.fadeOut()},2000);
                }
            }
        })
    }
</script>
</body>
</html>
